<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Convert image format</title>
    <link rel="stylesheet" href="assets/common.bundle.css">
    <link rel="stylesheet" href="./convert.css">
</head>

<body>
<div class="convert">
    <div class="convert-hd">
        <p>You can choose from .png, .webp, .jpeg, .jpg, .gif, .tiff, .avif, and .heic.</p>
        <p>.heic can only be converted to .jpeg or .png format.</p>
        <p>.ico and .icns can only be converted from .png format.</p>
    </div>
    <div class="convert-bd">
        <p><input type="file" id="file" accept=".png, .webp, .jpeg, .jpg, .gif, .tiff, .avif, .heic" multiple></p>
        <div class="convert-bd-set">
            <h2>Select the export format:</h2>
            <ul>
                <li>
                    <label>
                        <input type="checkbox" value="jpeg">jpeg
                    </label>
                </li>
                <li>
                    <label><input type="checkbox" value="png">png</label>
                </li>
                <li>
                    <label><input type="checkbox" value="webp">webp</label>
                </li>
                <li>
                    <label><input type="checkbox" value="gif">gif</label>
                </li>
                <!--            <li>-->
                <!--                <label><input type="checkbox" value="jp2">jp2</label>-->
                <!--            </li>-->
                <li>
                    <label><input type="checkbox" value="tiff">tiff</label>
                </li>
                <li>
                    <label><input type="checkbox" value="avif">avif</label>
                </li>
                <!--            <li>-->
                <!--                <label><input type="checkbox" value="heif">heif</label>-->
                <!--            </li>-->
                <li>
                    <label><input type="checkbox" value="ico">ico</label>
                </li>
                <li>
                    <label><input type="checkbox" value="icns">icns</label>
                </li>
            </ul>
        </div>
        <p><button id="export">Export</button></p>
    </div>
    <div class="convert-ft">
        <div id="convertLog" class="convert-log"></div>
    </div>
</div>
<script src="../assets/common.bundle.js"></script>
<script src="./convert.js"></script>

</body>

</html>
